<template>
  <div class="collection">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-card class="box-card">
          <p style="font-size:24px;margin: 0 0 15px">收藏</p>
          <div v-if="isFlag===0" style="text-align: center">
            <el-image :src="src"></el-image>
            <p style="font-family:'黑体';font-size:20px">暂无收藏!</p>
          </div>
          <div v-else>
            <el-table
              :data="tableData"
              border
              height="400"
              stripe
              style="width: 100%"
              @row-dblclick="showDetailInfo">
              <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column label="图片" width="80">
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.commodity.imgUrl"
                    fit="scale-down"></el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop="commodity.cname"
                label="商品名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="commodity.model"
                label="型号">
              </el-table-column>
              <el-table-column label="单价">
                <template slot-scope="scope">
                  ￥ {{scope.row.commodity.price}}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    @click="deleteCollectionInfo(scope.$index, scope.row)">移除
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="addCartInfo(scope.$index, scope.row)">加入购物车
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import topBar from '~/components/topBar.vue'
  import * as CollectionRequest from '../../assets/collection/collection'
  import * as CartRequest from "../../assets/cart/cart";

  export default {
    components: {
      topBar
    },
    data() {
      return {
        isFlag: 0,
        tableData: [],
        totalMoney: 0,
        src: 'http://theme.opencartdemo.cn/smart-3200-free/catalog/view/theme/default/image/no_items.png'
      };
    },
    methods: {
      showDetailInfo(row, col) {
        this.$router.push({
          path: '/category/detail',
          query: {category: row.commodity.id}
        })
      },
      addCartInfo(index, row) {
        let cartData = {
          cartId: this.$store.state.cartId,
          commodityId: row.commodity.id,
          count: 1,
        }
        CartRequest.addCart(this, cartData);
        CollectionRequest.getCollectionInfo(this,this.$store.state.userInfo.id);
      },
      updateCount() {
        let total = 0;
        this.tableData.forEach((item) => {
          total += item.total
        })
        this.totalMoney = total;
      },
      deleteCollectionInfo(index, row) {
        CollectionRequest.deleteCollectionInfo(this, row.id)
      }

    },
    mounted() {
      //表格中的total提前计算好
      CollectionRequest.getCollectionInfoDetail(this)
    }
  };
</script>

<style lang="less">
  .collection {
    margin-bottom: 30px;

    .box-card {
      border-radius: 12px;

      .cart-settle {
        margin-bottom: 20px;
        margin-top: 10px;
        float: right;
        text-align: right;
      }
    }
  }
</style>
